import React, { Fragment, useState } from "react";
import { Button, Table, Space, Popconfirm, Modal } from "antd";
import { PicRightOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";

import TimeShow from "./../../../components/TimeShow";
import { getFind, deleteFind } from "./../../../api/find";

function FindList(props) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const history = useHistory(); // 跳转传参
  const [details, setDetails] = useState("");
  const [findlist, setFindlist] = useState([]);
  useState(() => {
    getFind().then((res) => {
      setFindlist(res.data.data);
    });
  }, []);
  //   console.log(findlist);
  const showModal = (details) => {
    setDetails(details);
    if (details !== "") {
      setIsModalVisible(true);
    }
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const cancel = () => {};
  const goDetail = (text) => {
    // console.log(text);
    history.push("/content/EditFind?findid=" + text);
  };
  const goDelete = (findid, index) => () => {
    console.log(findid);
    deleteFind({ findid: findid }).then((res) => {
      // 解决删除后需手动刷新才可以更新视图的问题
      let arr = JSON.parse(JSON.stringify(findlist));
      arr.splice(index, 1);
      setFindlist(arr);
      //   setTotal(total - 1)
      console.log(res.data);
    });
  };
  const columns = [
    {
      title: "序号",
      align: "center",
      render: (text, record, index) => (
        <span>{(current - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: "标题",
      align: "center",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "列表图",
      align: "center",
      dataIndex: "img",
      key: "img",
      render: (text, record, index) => (
        <img src={text} alt="" style={{ height: "80px" }} />
      ),
    },
    {
      title: "分类",
      align: "center",
      dataIndex: "category",
      key: "category",
    },
    {
      title: "上传人",
      align: "center",
      dataIndex: "uploader",
      key: "findid",
    },
    {
      title: "状态",
      align: "center",
      dataIndex: "isshow",
      key: "isshow",
      render: (text, record, index) => (text === true ? "展示" : "下架"),
    },
    {
      title: "是否展示",
      align: "center",
      dataIndex: "isrecommend",
      key: "isrecommend",
      render: (text, record, index) => (text === true ? "是" : "否"),
    },
    {
      title: "上传时间",
      align: "center",
      dataIndex: "regtime",
      key: "regtime",
      render: (text, record, index) => {
        return <TimeShow time={text} />;
      },
    },
    {
      title: "操作",
      align: "center",
      dataIndex: "findid",
      render: (text, record, index) => {
        return (
          <Space>
            <span
              style={{ color: "#f00", cursor: "pointer" }}
              onClick={() => {
                showModal(record.detail, index);
              }}
            >
              查看详情
            </span>

                        <span
                            style={{ color: "#f00", cursor: "pointer" }}
                            onClick={() => goDetail(text)}
                        >
                            编辑
            </span>

                        <Popconfirm
                            title="确定删除?"
                            onConfirm={goDelete(
                                record.findid,
                                (current - 1) * pageSize + index
                            )}
                            onCancel={cancel}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{ color: "#f00", cursor: "pointer" }}>删除</span>
                        </Popconfirm>
                    </Space>
                );
            },
        },
    ];

    //分页设置
    const [pageSize, setPageSize] = useState(5);
    const [current, setCurrent] = useState(1);

    return (
        <Fragment>
            <span className="indexTitle">
                <PicRightOutlined />
        发现
        <Button
                    type="primary"
                    className="AddBanner"
                    onClick={() => props.history.push("/content/AddFind")}
                >
                    新增发现
        </Button>
      </span>
      <Table
        dataSource={findlist}
        columns={columns}
        rowKey={(record) => record.findid}
        bordered={true}
      />
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p dangerouslySetInnerHTML={{ __html: details }} />
      </Modal>
    </Fragment>
  );
}

export default FindList;
